<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <!-- <a-avatar
        class="avatar"
        size="small"
        shape="circle"
      /> -->
      <span class="name">问题反馈</span>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item>
        <a @click="problemSubmit" href="javascript:;">
          <span>&nbsp;问题提交</span>
        </a>
      </a-menu-item>
      <a-menu-item>
        <a @click="problemList" href="javascript:;">
          <span>&nbsp;问题列表</span>
        </a>
      </a-menu-item>
      <!-- <a-menu-item>
        <a @click="loginOut" href="javascript:;">
          <a-icon type="poweroff" />
          <span>&nbsp;退出登录</span>
        </a>
      </a-menu-item> -->
    </a-menu>
  </a-dropdown>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "ProblemAssembly",
  computed: {
    ...mapState("setting", ["weekMode"]),
    ...mapState("user", ["info"]),
  },

  methods: {
    // 退出登录
    // loginOut() {
    //   this.$store.dispatch("user/resetMenuRights");
    //   this.$router.replace({ path: "/login" });
    //   location.reload();
    //   localStorage.removeItem("zhqh-zhcg-pro-token");
    //   this.$router.push("/login");
    // },
    //问题提交
    problemSubmit() {
      console.log("！！！");
      this.$router.push({
        path: "ProblemSubmit",
      });
    },
    //问题列表
    problemList() {
      console.log("！！！");
      this.$router.push({
        path: "ProblemPersonList",
      });
    },
  },
};
</script>

<style lang="less">
.header-avatar {
  display: inline-flex;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
  }
  .name {
    font-weight: 500;
  }
}
.avatar-menu {
  width: 150px;
}
</style>
